<script lang="ts" setup>
import { AddTopic } from '@/components/business/tkmgr/tpbase'
import { reactive } from 'vue'
// 引用声明
const props = defineProps({
  item: {
    type: Object,
    default: () => {
    }
  },
  active: {
    type: String,
    default: () => ''
  },

  fieldNames: {
    type: Object,
    default: () => {
      return {
        label: 'label',
        value: 'value'
      }
    }
  }
})

// 声明事件
const emits = defineEmits(['click'])

// 点击事件
const handleClick = () => {
  emits('click', props.item)
}

// 点击菜单
const handleMenu = ({ item, key, keyPath }) => {
  switch (key) {
    case 'addTopic':
      getNewTopicMethod()
      break
  }
}

// 新增话题方法
const addTopicData = reactive({
  open: false
})
const getNewTopicMethod = () => {
  console.log('新增话题方法')
  console.log(props.item)
  addTopicData.open = true
}
</script>

<template>
  <div>
    <a-dropdown :trigger="['contextmenu']">
      <template #default>
        <div :class="[active === item[fieldNames.value] ? 'bg-[#00c792] text-white' : 'bg-[#f2f3f5] text-[#5b626b]']"
             class="cutbtn hover:bg-[#00c792] hover:text-white"
             v-bind="$attrs"
             @click="handleClick">
          {{ item[fieldNames.label] }}
        </div>
      </template>

      <template #overlay>
        <a-menu  v-if="active === item[fieldNames.value]" @click="handleMenu">
          <a-menu-item key="addTopic">新增话题</a-menu-item>
        </a-menu>
      </template>
    </a-dropdown>

    <!-- 新增话题 -->
    <AddTopic v-model:open="addTopicData.open" />
  </div>
</template>

<style lang="less" scoped>
.cutbtn {
@apply font-medium flex justify-center items-center cursor-pointer rounded box-border;
  width: 150px;
  font-size: 13px;
  height: 26px;
}
</style>
